<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig 3.25</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Use a font that mimics handwriting
        const mainFont = "20px 'Comic Sans MS', cursive, sans-serif";
        const scriptFont = "14px 'Comic Sans MS', cursive, sans-serif";

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Helper function to draw a resistor (vertical or horizontal)
        function drawResistor(x, y, length, orientation) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            const segments = 8;
            const amplitude = 8;
            let dx = 0, dy = 0;
            if (orientation === 'horizontal') {
                const segLength = length / segments;
                dx = segLength;
                for (let i = 0; i < segments; i++) {
                    const sign = (i % 2 === 0) ? 1 : -1;
                    ctx.lineTo(x + (i + 0.5) * dx, y + sign * amplitude);
                }
                ctx.lineTo(x + length, y);
            } else { // vertical
                const segLength = length / segments;
                dy = segLength;
                for (let i = 0; i < segments; i++) {
                    const sign = (i % 2 === 0) ? 1 : -1;
                    ctx.lineTo(x + sign * amplitude, y + (i + 0.5) * dy);
                }
                ctx.lineTo(x, y + length);
            }
            ctx.stroke();
        }

        // Helper function to draw an inductor (vertical)
        function drawInductor(x, y, length, numLoops) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            const loopLength = length / numLoops;
            const radius = 10;
            for (let i = 0; i < numLoops; i++) {
                ctx.arc(x, y + i * loopLength + loopLength / 2, radius, Math.PI / 2, -Math.PI / 2, true);
            }
            ctx.stroke();
        }

        // Helper function to draw a voltage source (vertical)
        function drawSource(x, y_top, y_bot) {
            const radius = 15;
            const y_center = (y_top + y_bot) / 2;
            ctx.beginPath();
            ctx.moveTo(x, y_top);
            ctx.lineTo(x, y_center - radius);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.arc(x, y_center, radius, 0, 2 * Math.PI);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(x, y_center + radius);
            ctx.lineTo(x, y_bot);
            ctx.stroke();
        }
        
        // --- Coordinates ---
        // Switch
        const sPos = { x: 180, y: 100 };
        const aPos = { x: 100, y: 130 };
        const bPos = { x: 220, y: 130 };
        
        // Sources
        const e1_x = 100;
        const e1_y_top = 160;
        const e1_y_bot = 280;
        const e2_x = 220;
        const e2_y_top = 160;
        const e2_y_bot = 280;

        // Resistors and Inductor
        const r1_x_start = 160;
        const r1_x_end = 340;
        const r1_y = 320;
        
        const topRightNode = { x: 370, y: 100 };
        const bottomRightNode = { x: 370, y: 320 };
        
        const r2_x = 340;
        const r2_y_start = 100;
        const r2_y_end = 320;
        
        const l_x = 400;
        const l_y_start = 100;
        const l_y_end = 320;

        // --- Drawing Wires ---
        ctx.beginPath();
        // Top wire from S to right side
        ctx.moveTo(sPos.x, sPos.y);
        ctx.lineTo(topRightNode.x, topRightNode.y);
        // Top parallel branch
        ctx.moveTo(topRightNode.x, topRightNode.y);
        ctx.lineTo(r2_x, r2_y_start);
        ctx.moveTo(topRightNode.x, topRightNode.y);
        ctx.lineTo(l_x, l_y_start);
        // Bottom parallel branch
        ctx.moveTo(bottomRightNode.x, bottomRightNode.y);
        ctx.lineTo(r2_x, r2_y_end);
        ctx.moveTo(bottomRightNode.x, bottomRightNode.y);
        ctx.lineTo(l_x, l_y_end);
        // Bottom wire with R1
        ctx.moveTo(r1_x_end, r1_y);
        ctx.lineTo(bottomRightNode.x, bottomRightNode.y);
        // Left side wires
        ctx.moveTo(aPos.x, aPos.y);
        ctx.lineTo(e1_x, e1_y_top);
        ctx.moveTo(bPos.x, bPos.y);
        ctx.lineTo(e2_x, e2_y_top);
        
        const bottomJunction = {x: 160, y: 280};
        ctx.moveTo(e1_x, e1_y_bot);
        ctx.lineTo(bottomJunction.x, bottomJunction.y);
        ctx.moveTo(e2_x, e2_y_bot);
        ctx.lineTo(bottomJunction.x, bottomJunction.y);
        ctx.moveTo(bottomJunction.x, bottomJunction.y);
        ctx.lineTo(r1_x_start, r1_y);
        
        ctx.stroke();

        // --- Drawing Switch ---
        ctx.beginPath();
        ctx.moveTo(sPos.x, sPos.y);
        ctx.lineTo(aPos.x, aPos.y);
        ctx.stroke();

        // Switch terminals
        ctx.beginPath();
        ctx.arc(sPos.x, sPos.y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(aPos.x, aPos.y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(bPos.x, bPos.y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // --- Drawing Components ---
        drawSource(e1_x, e1_y_top, e1_y_bot);
        drawSource(e2_x, e2_y_top, e2_y_bot);
        drawResistor(r1_x_start, r1_y, r1_x_end - r1_x_start, 'horizontal');
        drawResistor(r2_x, r2_y_start, r2_y_end - r2_y_start, 'vertical');
        drawInductor(l_x, l_y_start, l_y_end - l_y_start, 6);

        // --- Drawing Labels and Text ---
        ctx.font = mainFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Switch labels
        ctx.fillText('S', sPos.x, sPos.y - 20);
        ctx.fillText('A', aPos.x - 20, aPos.y);
        ctx.fillText('B', bPos.x, bPos.y - 20);

        // Source labels and polarities
        // ε1
        ctx.fillText('+', e1_x, e1_y_top - 10);
        ctx.fillText('-', e1_x, e1_y_bot + 10);
        ctx.textAlign = 'right';
        ctx.fillText('ε', e1_x - 30, (e1_y_top + e1_y_bot) / 2);
        ctx.font = scriptFont;
        ctx.fillText('1', e1_x - 30 + 7, (e1_y_top + e1_y_bot) / 2 + 6);
        ctx.font = mainFont;
        ctx.fillText('=5 V', e1_x - 30 + 35, (e1_y_top + e1_y_bot) / 2);

        // ε2
        ctx.textAlign = 'center';
        ctx.fillText('-', e2_x, e2_y_top - 10);
        ctx.fillText('+', e2_x, e2_y_bot + 10);
        ctx.textAlign = 'right';
        ctx.fillText('ε', e2_x - 30, (e2_y_top + e2_y_bot) / 2);
        ctx.font = scriptFont;
        ctx.fillText('2', e2_x - 30 + 7, (e2_y_top + e2_y_bot) / 2 + 6);
        ctx.font = mainFont;
        ctx.fillText('=10 V', e2_x - 30 + 45, (e2_y_top + e2_y_bot) / 2);
        
        // R1 label
        ctx.textAlign = 'center';
        let currentX = (r1_x_start + r1_x_end) / 2 - 40;
        let currentY = r1_y + 30;
        ctx.fillText('R', currentX, currentY);
        currentX += ctx.measureText('R').width - 5;
        ctx.font = scriptFont;
        ctx.fillText('1', currentX, currentY + 5);
        currentX += ctx.measureText('1').width + 5;
        ctx.font = mainFont;
        ctx.fillText('= 10', currentX, currentY);
        currentX += ctx.measureText('= 10').width - 5;
        ctx.font = scriptFont;
        ctx.fillText('4', currentX, currentY - 8);
        currentX += ctx.measureText('4').width + 2;
        ctx.font = mainFont;
        ctx.fillText('Ω', currentX, currentY);

        // R2 label
        ctx.textAlign = 'right';
        currentX = r2_x - 20;
        currentY = (r2_y_start + r2_y_end) / 2;
        ctx.fillText('R', currentX, currentY);
        currentX += ctx.measureText('R').width - 5;
        ctx.font = scriptFont;
        ctx.fillText('2', currentX, currentY + 5);
        currentX += ctx.measureText('2').width + 5;
        ctx.font = mainFont;
        ctx.fillText('= 10', currentX, currentY);
        currentX += ctx.measureText('= 10').width - 5;
        ctx.font = scriptFont;
        ctx.fillText('4', currentX, currentY - 8);
        currentX += ctx.measureText('4').width + 2;
        ctx.font = mainFont;
        ctx.fillText('Ω', currentX, currentY);

        // L label
        ctx.textAlign = 'left';
        currentX = l_x + 20;
        currentY = (l_y_start + l_y_end) / 2;
        ctx.fillText('L = 10', currentX, currentY);
        currentX += ctx.measureText('L = 10').width - 5;
        ctx.font = scriptFont;
        ctx.fillText('-3', currentX, currentY - 8);
        currentX += ctx.measureText('-3').width + 2;
        ctx.font = mainFont;
        ctx.fillText('H', currentX, currentY);

        // Figure label
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.25', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>